<template>
  <view class="brandView">
    <view class="brandView-title">{{ brandData.title }}</view>
    <el-row class="elRow" justify="center" gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" class="elCol">
        <view
          class="brandView-text"
          v-for="(item, index) in brandData.texts"
          :key="index"
          >{{ item }}</view
        >
        <el-row class="elRow" justify="center" gutter="20">
          <el-col
            :xs="24"
            :sm="12"
            :md="12"
            :lg="12"
            class="elCol"
            v-for="(item, index) in brandData.list"
            :key="index"
          >
            <view class="brandView-list">
              <view class="brandView-list-title">{{ item.title }}</view>
              <view class="brandView-list-text">{{ item.text }}</view>
            </view>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" class="elCol">
        <image
          :src="brandData.img"
          class="brandView-img"
          style="width: 100%"
          mode="widthFix"
        ></image>
      </el-col>
    </el-row>
  </view>
</template>

<script setup>
import { ref } from "vue";
const brandData = ref({
  title: "品牌故事",
  texts: [
    'REMAX 始创于1988年，由国际知名地毯设计师 Marco Remington 创立。三十余年来，我们始终坚持"让艺术融入生活"的理念，致力于将传统地毯工艺与现代设计相结合。',
    "从最初的小型工坊到如今的国际品牌，REMAX已在全球20多个国家设立了销售网络，产品被众多五星级酒店、高端会所和私人豪宅选用。我们的设计师团队来自世界各地，他们带来不同的文化背景和设计理念，共同创造出兼具艺术性和实用性的地毯作品。",
  ],
  list: [
    {
      title: "35+",
      text: "年行业经验",
    },
    {
      title: "50+",
      text: "国家销售",
    },
    {
      title: "200+",
      text: "设计师团队",
    },
    {
      title: "1000+",
      text: "产品系列",
    },
  ],
  img: "https://picsum.photos/id/188/800/720",
});
</script>

<style scoped lang="scss">
.brandView {
  width: 100%;
  height: auto;
  color: #4b5563;

  &-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 18px;
  }
  &-text {
    font-size: 16px;
    line-height: 30px;
    text-align: justify;
    margin-bottom: 15px;
  }

  &-list {
    width: 100%;
    height: auto;
    background-color: rgb(26 54 93 / 0.05);
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    line-height: 1.5;

    &-title {
      font-size: 40px;
      font-weight: 700;
    }
    &-text {
      font-size: 16px;
      line-height: 26px;
      text-align: justify;
    }
  }

  .brandView-img {
    border-radius: 10px;
  }

  .elRow {
    width: 100%;
    margin: 0 auto !important;

    .elCol {
      margin-bottom: 20px;
    }
  }
}
@media screen and (max-width: 768px) {
  .brandView {
    .elCol {
      padding: 0 !important;
    }
  }
}
</style>
